<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Obaju : e-commerce template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="sourse/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="sourse/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
    <!-- owl carousel-->
    <link rel="stylesheet" href="sourse/vendor/owl.carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="sourse/vendor/owl.carousel/assets/owl.theme.default.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="sourse/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="sourse/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="favicon.png">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <style>
      #sssss li{
        width: 500px;
        text-align: center;
        margin: 10px auto;
        background-color: #95999c;
      }
    </style>
  </head>
  <body>
    <div id="all">
      <div id="content">
        <div class="container">
          <div class="row">
            <div class="col-lg-3">
              <div class="card sidebar-menu">
                <div class="card-header">
                  <h3 class="h4 card-title">个人中心</h3>
                </div>
                <div class="card-body">
                  <ul class="nav nav-pills flex-column">
                    <a href="customer1" class="nav-link"><i class="fa fa-list"></i> 我的订单</a>
                    <a href="customer2" class="nav-link active"><i class="fa fa-list"></i> 我的地址</a>
                    <a href="customer3" class="nav-link"><i class="fa fa-user"></i>修改信息</a>
                    <a href="javascript:void(0)" onclick="window.parent.location.href = 'jump'" class="nav-link"><i class="fa fa-sign-out"></i>退出</a>
                  </ul>
                </div>
              </div>
              <!-- /.col-lg-3-->
              <!-- *** CUSTOMER MENU END ***-->
            </div>
            <div id="customer-orders" class="col-lg-9">
              <div class="box">
                <h1>我的订单</h1>
                <div style="text-align: center">
                  <ul id="sssss">
                    <c:forEach items="${add}" var="addr">
                      <li id="li_${addr.addid}"> 姓名:${addr.name}<br>手机:${addr.phone}<br>
                        地址:${addr.path}<br>详细地址:${addr.userAddress}<br><button onclick="delss('${addr.addid}')">删除</button></li>
                    </c:forEach>
                  </ul>
                  <button style="margin: 0px auto;background-color: #0c85d0" onclick="$('#dz').attr('style','')">添加地址</button>
                </div>
                <div id="dz" style="display: none">
                  <div class="box">
                    <form method="get">
                      <h1>添加地址</h1>
                      <%--                    <div class="nav flex-column flex-md-row nav-pills text-center"><a href="checkout1.html" class="nav-link flex-sm-fill text-sm-center active"> <i class="fa fa-map-marker">                  </i>Address</a><a href="#" class="nav-link flex-sm-fill text-sm-center disabled"> <i class="fa fa-truck">                       </i>Delivery Method</a><a href="#" class="nav-link flex-sm-fill text-sm-center disabled"> <i class="fa fa-money">                      </i>Payment Method</a><a href="#" class="nav-link flex-sm-fill text-sm-center disabled"> <i class="fa fa-eye">                     </i>Order Review</a></div>--%>
                      <div class="content py-3">
                        <div class="row">
                          <div class="col-md-3">
                            <div class="form-group">
                              <label for="firstname">姓名</label>
                              <input id="firstname" name="name" type="text" class="form-control">
                            </div>
                          </div>
                        </div>
                        <!-- /.row-->
                        <div class="row">
                          <div class="col-md-3">
                            <div class="form-group">
                              <label for="company">手机</label>
                              <input id="company" name="phone" type="text" class="form-control">
                            </div>
                          </div>
                        </div>
                        <!-- /.row-->
                        <input id="city" name="path" type="hidden" class="form-control">
                        <div class="row">
                          <div class="col-md-4 col-lg-3">
                            <div class="form-group">
                              <label for="city">省:</label>
                              <select name="city1"></select>
                            </div>
                          </div>
                          <div class="col-md-4 col-lg-3">
                            <div class="form-group">
                              <label for="city">市:</label>
                              <select name="city2"></select>
                            </div>
                          </div>
                          <div class="col-md-4 col-lg-3">
                            <div class="form-group">
                              <label for="city">区(县)</label>
                              <select name="city3"></select>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-6">
                            <div class="form-group">
                              <label for="phone">详细地址</label>
                              <input id="phone" name="userAddress" type="text" class="form-control">
                            </div>
                          </div>
                        </div>
                        <!-- /.row-->
                      </div>
                      <div class="box-footer d-flex justify-content-between"><a href="javascript:void(0)" id="closeAddr" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i>关闭</a>
                        <button id="sub" type="button" class="btn btn-primary">添加<i class="fa fa-chevron-right"></i></button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="sourse/vendor/jquery/jquery.min.js"></script>
    <script src="sourse/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="sourse/vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="sourse/vendor/owl.carousel/owl.carousel.min.js"></script>
    <script src="sourse/vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
    <script src="sourse/js/front.js"></script>
    <script type="text/javascript">
      function city1(){
        $.ajax({
          url: "queryProvince",
          type: "post",
          success:function (list) {
            if(list != undefined){
              for (var i in list){
                $("select[name='city1']").append("<option value='"+list[i].pro_id+"'>"+list[i].pro_name+"</option>")
              }
              city2()
            }
          },
          dataType:"json"
        })
      }
      function city2(){
        var id = $("select[name='city1']").val();
        $("select[name='city2']").html("")
        $("select[name='city3']").html("")
        $.ajax({
          url: "queryCity",
          data:{"id":id},
          type: "post",
          success:function (list) {
            if(list != undefined){
              id = list[0]
              for (var i in list){
                $("select[name='city2']").append("<option value='"+list[i].city_id+"'>"+list[i].city_name+"</option>")
              }
              city3()
            }
          },
          dataType:"json"
        })
      }

      function city3(){
        var id = $("select[name='city2']").val();
        $("select[name='city3']").html("")
        $.ajax({
          url: "queryDistrict",
          data:{"id":id},
          type: "post",
          success:function (list) {
            if(list != undefined){
              for (var i in list){
                $("select[name='city3']").append("<option value='"+list[i].dis_id+"'>"+list[i].dis_name+"</option>")
              }
            }
          },
          dataType:"json"
        })
      }

      function delss(id){
          $.ajax({
              url:"delAddr",
              data:{"addid":id},
              type:"post",
              success:function (res) {
                  if(res == "0000"){
                      $("#li_"+id).remove()
                      alert("删除成功!")
                  }else{
                      alert("删除失败!")
                  }
              }
          })
      }

      city1()
      $("select[name='city1']").change(function () {
        city2()
      })
      $("select[name='city2']").change(function () {
        city3()
      })
      $("#closeAddr").click(function () {
        $("#dz").attr("style","display:none")
      })
      $("#sub").click(function () {
        var sheng = $("option[value='"+ $("select[name='city1']").val()+"']").text();
        var shi = $("option[value='"+ $("select[name='city2']").val()+"']").text();
        var xian = $("option[value='"+ $("select[name='city3']").val()+"']").text();
        $("input[name='path']").val(sheng+shi+xian)
        if($("input[name='name']").val() == ""){
          alert("请输入收货人")
        }else if($("input[name='phone']").val() == ""){
          alert("请输入收货人手机")
        }else if($("input[name='path']").val() == ""){
          alert("请输入收货人地址")
        }else if($("input[name='userAddress']").val() == ""){
          alert("请输入收货人详细地址")
        }else{
          $.ajax({
            type:"post",
            url:"newAdders",
            data:$("form").serializeArray(),
            success:function (rels) {
              if(rels != "-1"){
                var lss = $("<li></li>");
                lss.html("<input type='radio' checked name='addid' value='"+rels
                        +"' />姓名:"+$("input[name='name']").val()+"<br>手机:"+
                        $("input[name='phone']").val()+"<br>地址:"+
                        $("input[name='path']").val()+"<br>详细地址:"+
                        $("input[name='userAddress']").val())
                $("#sssss").append(lss)
                $("#dz").attr("style","display:none")
              }else{
                alert("添加失败")
              }
            }
          })
        }
      })
    </script>
  </body>
</html>